<template>
	<el-container>
		<el-main class="nopadding">
			<div class="tvbBox">
				<div class="titlebox">
					<p class="title">&#12288;</p>
					<div class="lang">
						<label style="margin-right: 10px;width: 100px">{{ $t('tvbshort.selectLanguage') }}</label>
						<el-select v-model="dialogInfo.langurage" :placeholder="$t('table_data.selectText')" clearable>
							<el-option v-for="item in dialogInfo.langList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="listBox">
					<div class="listBox-item" v-for="(item, index) in shortList" :key="index" :class="{selected: item.optFor}">
						<div class="righttop" :class="{'righttop-selected': item.optFor}">
							<el-icon v-if="item.optFor"><el-icon-success-filled /></el-icon>
							<span>{{ item.optFor ? $t('tvbshort.selected') : $t('tvbshort.unselected') }}</span>
						</div>
						<div class="listBox-item-img">
							<img :src="item.coverPicture" class="image">
						</div>
						<div class="listBox-item-cont">
							<p class="listBox-item-cont-title text">{{ setLocale(item.shortName) }}</p>
							<p class="listBox-item-cont-category text">{{ setLocale(item.category) }}</p>
							<div class="listBox-item-cont-tagbox hide-scrollbar">
								<p class="listBox-item-cont-tagbox-tag" v-for="item in item.tags" :key="item">
									<el-tag type="info">{{ setLocale(item) }}</el-tag>
								</p>
							</div>
							<div class="listBox-item-cont-btns">
								<el-button type="primary" @click="handleSelect(item)" :loading="item.isLoading">{{ item.optFor ? $t('tvbshort.deselect') : $t('tvbshort.selected') }}</el-button>
								<el-button class="detailClass" @click="handleDetail(item)" :loading="item.isLoading">{{ $t('tvbshort.detail') }}</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-main>
		<!-- 弹窗框 -->
		<sCDialog :modelValue="dialogVisible" :showFullscreen="false" :showClose="true" @closeDialog="closeDialog" :width="dialogWidth" :close-on-click-modal="false">
      <template v-slot:header>
				<span class="scdialog-title">{{ $t('tvbshort.preview') }}</span>
      </template>
      <div class="cont">
				<div class="cont-leftbox">
					<div class="cont-leftbox-videobox">
						<!--  crossorigin="anonymous" -->
						<video controls class="videoItem" @durationchange="durationchange" ref="video" id="video" crossorigin="anonymous" @pause="palyPause" @canplay="canplay" @timeupdate="onTimeupdate" :src="videoUrl">
							<track
								v-for="(item,index) in cationArr"
								:key="index"
								:label="item.label"
								kind="subtitles"
								:srclang="item.lang"
								:src="item.src"
								:default="item.default"
							/>
						</video>
						<div class="cont-leftbox-videobox-dramabox" v-if="dialogInfo.dramaList">
							<div class="cont-leftbox-videobox-dramabox-item" v-for="(item, index) in dialogInfo.dramaList.drama" :key="index" @click="selectMovieMethod(item,index)">
								<div class="cont-leftbox-videobox-dramabox-item-img">
									<img :src="item.coverPicture" class="image">
									<el-icon v-if="current==index" class="play"><el-icon-video-pause /></el-icon>
									<el-icon v-else class="play"><el-icon-video-play /></el-icon>
								</div>
								<div class="cont-leftbox-videobox-dramabox-item-cont">
									<p class="cont-leftbox-videobox-dramabox-item-cont-title text">{{ $t('tvbshort.episode', {data: item.episode}) }}</p>
									<p class="cont-leftbox-videobox-dramabox-item-cont-desc text">{{ setLocale(item.title) }}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="line"></div>

				<div class="cont-rightbox" v-if="showData">
					<div class="shortName">
						{{ setLocale(dialogInfo.dramaList.shortName) }}
					</div>
					<div class="shortDesc">
						{{ setLocale(dialogInfo.dramaList.description) }}
					</div>
					<div class="informationOpen">
            <div class="keyValue" ref="keyValue">
               <div class="row" ref="row">
                  <span>{{ $t('tvbshort.actors', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.cast?dialogInfo.dramaList.cast:setLocale(dialogInfo.dramaList.casts) }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.director', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.director?dialogInfo.dramaList.director:setLocale(dialogInfo.dramaList.directors) }} </span>
               </div>
               <!-- <div class="row">
                  <span>{{ $t('tvbshort.scriptwriter', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.writer }} </span>
               </div> -->
               <div class="row">
                  <span>{{ $t('tvbshort.author', dialogInfo.langurage) }}</span>
                  <span>{{ setLocale(dialogInfo.dramaList.creatorName) }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.restriction') }}</span>
                  <span>{{ dialogInfo.ageType[dialogInfo.dramaList.ageRating] || 'G' }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.type') }}</span>
                  <span>{{ setLocale(dialogInfo.dramaList.movieGenreName) }} </span>
               </div>
               <div class="row" v-if="dialogInfo.dramaList&&dialogInfo.dramaList.productions.length>0">
                  <span>{{ $t('tvbshort.productions', dialogInfo.langurage) }}</span>
									<div class="display-flex-start-start">
										<p v-for="(item,index) in dialogInfo.dramaList.productions" :key="index">{{ setLocale(item.productionName)+`${dialogInfo.dramaList.productions.length-1==index?'':','}` }} </p>
									</div>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.language', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.shortLanguage }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.subtitleLanguage', dialogInfo.langurage) }}</span>
									<p>{{ dialogInfo.srtLang }} </p>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.availableArea', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.saleArea }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.resolution', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.resolution }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.series', dialogInfo.langurage) }}</span>
                  <span>{{ dialogInfo.dramaList.category }} </span>
               </div>
               <div class="row" v-if="dialogInfo.dramaList&&dialogInfo.dramaList.tags.length>0">
                  <span>{{ $t('tvbshort.category', dialogInfo.langurage) }}</span>
									<div class="display-flex-start-start">
										<p v-for="(item,index) in dialogInfo.dramaList.tags" :key="index">{{ setLocale(item.tagName)+`${dialogInfo.dramaList.tags.length-1==index?'':','}` }} </p>
									</div>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.episode', dialogInfo.langurage, {data: ''}) }}</span>
                  <span>{{ dialogInfo.dramaList.episode }} </span>
               </div>
               <div class="row">
                  <span>{{ $t('tvbshort.shortStatus', dialogInfo.langurage) }}</span>
                  <span>{{ setCompleted(dialogInfo.dramaList.completed||0) }} </span>
               </div>
            </div>
         	</div>
				</div>

      </div>
    </sCDialog>
	</el-container>

</template>

<script>

import sCDialog from "@/components/scDialog"

	export default {
		name: "client",
		components: {
			sCDialog
		},
		data(){
			return {
				dialogWidth: '55%',
				videoUrl: '',
				current: 0,
				shortId: '',
				dialogVisible: false,
				selectId: [],
				shortList: [],
				isLoading: false,
				showData: false,
				// 字幕
				cationArr: [
					{
						label: 'English',
						lang: 'en',
						src: '',
						default: false,
						type: 'en-US'
					},
					{
						label: '日本語',
						lang: 'ja',
						src: '',
						default: true,
						type: 'ja-JP'
					},
					{
						label: '中文简体',
						lang: 'zh',
						src: '',
						default: false,
						type: 'zh-CN'
					},
					{
						label: '中文繁体',
						lang: 'zt',
						src: '',
						default: false,
						type: 'zh-TW'
					},
					{
						label: 'French',
						lang: 'fr',
						src: '',
						default: false,
						type: 'fr-FR'
					}
				],
				dialogInfo: {
					resolution: '2K、1080P、720P、640P',
					srtLang: '',
					ageType: {
							'11': 'G',
							'12': 'PG12',
							'13': 'R15+',
							'14': 'R18+'
					},
					completedList: [
					],
					langurage: null,
					dramaList: {},
					langList: [
						{
							name: '简体中文',
							value: 'zh_CN',
						},
						{
							name: '繁體中文',
							value: 'zh_TW',
						},
						{
							name: 'English',
							value: 'en_US',
						},
						{
							name: '日本語',
							value: 'ja_JP',
						}
					]
				},
				params: {
					pageNum: 1,
					pageSize: 100,
				}
			}
		},
		watch: {
			"dialogInfo.langurage": {
				handler(val) {
					console.log(val);
					this.dialogInfo.completedList = [
						{},
						{
							type: 1,
							label: this.$t('short_data.status.running', this.dialogInfo.langurage)
						},
						{
							type: 2,
							label: this.$t('short_data.status.completed', this.dialogInfo.langurage)
						}
					];
				},
				deep: true
			}
		},
		computed: {
			setCategory() {
				return async (e) => {
					if(e) { 
						return e[this.dialogInfo.langurage]||e['en_US']
					} else {
						return ''
					}
				}
			},
			setLocale(){
				return (e)=>{
					if(e) { 
						return e[this.dialogInfo.langurage]||e['en_US']
					} else {
						return ''
					}
				}
			},
			setCompleted() {
				return (e)=>{
					return this.dialogInfo.completedList[e].label || '';
					// return e?(this.dialogInfo.completedList.find(n=>n.type == e).label):''
				}
			}
		},
    async created(){
			this.dialogInfo.langurage = this.$i18n.locale;
			this.dialogInfo.completedList = [
				{},
				{
					type: 1,
					label: this.$t('short_data.status.running', this.dialogInfo.langurage)
				},
				{
					type: 2,
					label: this.$t('short_data.status.completed', this.dialogInfo.langurage)
				}
			];
			this.getList();
    },
		methods: {
			async selectMovieMethod(item, index) {
				const res = await this.$API.three_api.fetchVideoUrl.get({
					shortId: this.shortId,
					episodeNo: item.episode,
					dramaKey: item.dramaKey
				});
				if(res.success) {
					for(let i in res.data.episodes){
						let srt = this.cationArr.find(n=>n.type == res.data.episodes[i].lang);
						srt.src = res.data.episodes[i].url
					}
					this.videoUrl = res.data.mediaBean.filePath;
					this.current = index;
					this.showData = true;
				}
			},
			async handleDetail(item) {
				this.showData = false;
				this.isLoading = true;
				item.isLoading = true;
				this.shortId = '';
				const res = await this.$API.shorts.shortDetail.get(item.shortId);
				if(res.code == 'OK') {
					this.isLoading = false;
					item.isLoading = false;
					this.shortId = item.shortId;
					this.dialogVisible = true;
					this.dialogInfo.dramaList = res.data;
					this.dialogWidth = 540 + 500;
					if(this.dialogInfo.dramaList.drama.length > 0) {
						this.selectMovieMethod(this.dialogInfo.dramaList.drama[0], 0);
						this.getSrtLang(this.dialogInfo.dramaList.drama[0].dramaId);
						this.dialogInfo.dramaList.category = await this.getCategory(this.dialogInfo.dramaList.category);
					}
				}
			},
			async getSrtLang(e) {
				const res = await this.$API.subtitle.shortSrtDetail.get(e);
				if(res.code == 'OK') {
					this.dialogInfo.srtLang = res.data.srtList.map(n=>this.cationArr.find(t=>t.type == n.srtLang).label).join(', ');
				}
			},
			async handleSelect(item) {
				let res;
				this.isLoading = true;
				item.isLoading = true;
				if(item.optFor) {
					res = await this.$API.three_api.postCancelShort.get({ shortId: item.shortId });
				} else {
					res = await this.$API.three_api.postSelectShort.get({ shortId: item.shortId });
				}
				this.isLoading = false;
				item.isLoading = false;
				if(res.success) {
					this.getList();
				} else {
					this.$message.error(res.msg);
				}
			},
			async getList() {
				const res = await this.$API.three_api.fetchList.get(this.params);
				if(res.code == 'OK' && res.data.list && res.data.list.length > 0) {
					this.shortList = res.data.list;
				}
			},
			async getCategory(e) {
				const res = await this.$API.shorts.fetchCategory.get();
				if(res.code == 'OK') {
					const data = res.data.find(n=>n.id == e).title;
					return this.setCategory(data);
				}
			},
			closeDialog() {
				this.dialogVisible = false;
				this.videoUrl = '';
				this.current = 0;
				this.shortId = '';
			}
		}
	}
</script>
<style lang="scss" scoped>
	div, p, span, .el-button {
		font-weight: unset !important;
		font-family: unset !important;
	}
	/* 隐藏滚动条 */
	.hide-scrollbar {
		/* 隐藏滚动条，但仍可以滚动 */
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
	}

	.hide-scrollbar::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera等 */
	}
	.display-flex-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.display-flex-start-start {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
	}
	.tvbBox {
		padding: 10px 20px;
		width: 100%;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		.titlebox {
			position: relative;
			.title {
				font-size: 40px;
				// font-weight: 400;
			}
			.lang {
				position: absolute;
				right: 0;
				top: 0;
			}
		}
		.listBox {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
			.selected {
				border: 1px solid #DFC473;
			}
			.listBox-item {
				position: relative;
				width: 380px;
				height: 232px;
				padding: 16px;
				margin-bottom: 20px;
				margin-right: 22px;
				background: #FFFFFF;
				border-radius: 8px;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: space-between;
				align-items: center;
				.righttop {
					position: absolute;
					top: 0;
					right: 0;
					width: max-content;
					padding: 4px 6px;
					background: #D6D6D6;
					border-radius: 0 8px 0 8px;
					color: #fff;
					height: 28px;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.el-icon svg, .el-icon {
						width: 16px;
						height: 16px;
					}
				}
				.righttop-selected {
					background: #2FBC34;
				}
				&-img {
					width: 150px;
					height: 200px;
					.image {
						border-radius: 10px;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				&-cont {
					width: 186px;
					height: 190px;
					margin-top: 10px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					&-title {
						font-size: 20px;
						// font-weight: 400;
						text-align: left;
					}
					&-category {
						font-size: 14px;
						// font-weight: 400;
						color: #FF6711;
					}
					&-tagbox {
						display: flex;
						width: 186px;
						overflow-x: scroll;
						&-tag {
							font-size: 14px;
							// font-weight: 400;
							color: #999999;
							margin-right: 4px;
						}
					}
					&-btns {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.el-button {
							width: 89px;
							height: 32px;
							font-size: 14px;
							// font-weight: 400;
							border-radius: 4px;
						}
						.detailClass {
							border: 2px solid #BB9B51;
							color: #BB9B51;
						}
					}
				}
			}
		}
	}
	.cont {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		&-leftbox {
			width: 55%;
			height: 100%;
			.videoItem {
				width: 540px;
				height: 304px;
			}
			.cont-leftbox-videobox-dramabox {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;
				height: 250px;
				width: 540px;
				overflow-y: scroll;
				&-item {
					width: 48%;
					margin-right: 8px;
					margin-bottom: 10px;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					cursor: pointer;
					&-cont {
						width: 152px;
						height: 100%;
						&-title {
							font-size: 12px;
							// font-weight: 400;
							color: #888888;
						}
						&-desc {
							font-size: 12px;
							// font-weight: 500;
							color: #333;
						}
					}
					&-img {
						width: 90px;
						height: 54px;
						margin-right: 8px;
						position: relative;
						.image {
							width: 100%;
							height: 100%;
							object-fit: cover;
							border-radius: 4px;
						}
						.el-icon svg, .el-icon {
							width: 90px;
							height: 54px;
							padding: 15px;
							color: #fff;
						}
						.play {
							position: absolute;
							border-radius: 4px;
							left: 0;
							top: 0px;
							background: rgba(0, 0, 0, 0.5);
							
						}
					}
				}
			}
		}
		&-rightbox {
			width: 43%;
			height: 100%;
			.shortName {
				font-size: 20px;
				// font-weight: 400;
				color: #333;
				margin: 12px 0;
			}
			.shortDesc {
				font-size: 14px;
				// font-weight: 400;
				color: #333;
				margin: 12px 0;
			}
      .informationOpen {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         width: 100%;
         position: relative;
         p {
            text-align: left;
            color: rgba(187, 155, 81, 1);
         }
         .keyValue {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s;
            p {
               margin: 0;
               padding: 0;
               color: rgba(248, 248, 248, 1);
               font-size: 13px;
              //  font-weight: 400;
               padding: 0 12px;
            }

            .row {
               display: flex;
               justify-content: flex-start;
               align-items: center;
               font-size: 12px;
              //  font-weight: 500;
               color: #999;
               padding: 8px 0;
							 p {
								font-size: 13px;
								color: #333;
								margin: 0;
								padding: 0;
								padding-right: 4px;
							 }
               span:nth-child(1) {
                  display: block;
                  width: 120px;
									margin-right: 29px;
                  text-align: left;
               }
               span:nth-child(2) {
									font-size: 13px;
                  color: #333;
                  // font-weight: 400;
               }
               div:nth-child(2) {
									width: auto;
									font-size: 13px;
                  color: #333;
                  // font-weight: 400;
               }
            }
            // .row:last-child {
            //    padding-bottom: 24px;
            // }
         }
      }
		}
		.line {
			width: 1px;
			height: 483px;
			background: #EAEAEA;
		}
	}
	.scdialog-title {
		font-size: 17px;
		// font-weight: 700;
	}
</style>
